<template>
    <div>
      <div class="top_image">
        <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/contact_us/banner.jpeg" style="width: 100%;height: 100%;display: block">
      </div>
      <div>
        <div class="contact_bottom_content">

           <div class="contact_text_content">
             <span class="contact_title" style="display: block">尊敬的访客:</span>
             <div style="margin-top: 10px">
                <p class="contact_text" >欢迎您进入芸助手，感谢您对厦门睿商科技有限公司的信赖，当您进入到此页面时，您已成为我们尊贵的客人，您可以通过以下几种方式与我们取得联系。</p>
             </div>

           </div>
           <div class="contact_call_content">
              <div class="call_item">
                  <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/phone.png" class="call_image">
                  <span class="call_type_text">手机号码</span>
                  <span class="call_type_text">13860431130</span>
              </div>
             <div class="call_item">
               <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/wechat.png" class="call_image">
               <span class="call_type_text">微信号码</span>
               <span class="call_type_text">witpay</span>
             </div>
             <div class="call_item">
               <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/email.png" class="call_image">
               <span class="call_type_text">联系邮箱</span>
               <span class="call_type_text">30355701@qq.com</span>
             </div>
             <div class="call_item">
               <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/address.png" class="call_image">
               <span class="call_type_text" >公司地址</span>
               <span class="call_type_text" style="line-height: 12px">福建省厦门市思明区龙山南路84-4号(赛伯乐大厦)213</span>
             </div>
           </div>
<!--          <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/addressIMG.png" class="address_image">-->
          <div style="width: 800px;margin-top: 20px">
            <Map :mapPoint="mapPoint" :setcenter="setcenter"></Map>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import Map from '@/components/GaodeMap/index'
  export default {
    name: 'contact',
    data(){
      return{
        setcenter:['118.138714','24.481917'],
        mapPoint:false
      }
    },
    components:{
      Map
    }
  }
</script>

<style scoped>
@media screen and (min-width: 0px) and (max-width: 320px) {
  .contact_bottom_content{
    width: 100%;
    background-color: white;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }
  .contact_text{
    font-size: 13px;
    /*letter-spacing:5px;*/
    font-family: SimSun;
    font-weight: 400;
    line-height: 19px;
    color: #717171;
    text-indent: 1.5em;
  }
  .contact_title{
    font-size: 16px;
    font-family: SimSun;
    font-weight: 400;
    color: #717171;
  }
  .contact_text_content{
    /*width: 300px;*/
  }
  .contact_call_content{
    display: flex;
    margin-top: 40px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  .call_item{
    flex-shrink: 0;
    width: 100%;
    /*height: 120px;*/
    padding: 5px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .call_image{
    height: 30px;
    width: 30px;
  }
  .address_image{
    width: 100%;
    margin-top: 20px;
  }
  .call_type_text{
    font-size: 12px;
    /*color: rgba(0,0,0,0.3);*/
    line-height: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }
}
  @media screen and (min-width: 321px) and (max-width: 750px) {
    .contact_bottom_content{
      width: 100%;
      background-color: white;
      padding-top: 24px;
      padding-bottom: 24px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .contact_text{
      font-size: 14px;
      /*letter-spacing:5px;*/
      font-family: SimSun;
      font-weight: 400;
      line-height: 20px;
      color: #717171;
      text-indent: 2em;
      text-align: justify;
    }
    .contact_title{
      font-size: 17px;
      font-family: SimSun;
      font-weight: 400;
      color: #717171;
    }
    .contact_text_content{
      /*width: 300px;*/
    }
    .contact_call_content{
      display: flex;
      margin-top: 40px;
      width: 100%;
      /*overflow-x: auto;*/
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
    .call_item{
      flex-shrink: 0;
      width: 100%;
      /*height: 120px;*/
      padding: 5px;
      margin-bottom: 10px;
      box-sizing: border-box;
      border: 1px solid rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }
    .call_image{
      height: 30px;
      width: 30px;
    }
    .address_image{
      width: 100%;
      margin-top: 20px;
    }
    .call_type_text{
      font-size: 12px;
      /*color: rgba(0,0,0,0.3);*/
      line-height: 20px;
      margin-left: 10px;
      margin-right: 10px;

    }
  }
  @media screen and (min-width: 751px) and (max-width: 1199px){
    .contact_bottom_content{
      width: 100%;
      background-color: white;
      padding-top: 24px;
      padding-bottom: 24px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
    }
    .contact_text{
      font-size: 20px;
      letter-spacing:5px;
      font-family: SimSun;
      font-weight: 400;
      line-height: 30px;
      color: #717171;
      text-indent: 2em;
      text-align: justify;
    }
    .contact_title{
      font-size: 20px;
      font-family: SimSun;
      font-weight: 400;
      color: #717171;
    }
    .contact_text_content{
      width: 750px;
    }
    .contact_call_content{
      display: flex;
      margin-top: 40px;
      width: 750px;
      justify-content: space-between;
      align-items: center;
    }
    .call_item{
      width: 180px;
      height: 120px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }
    .call_image{
      height: 30px;
      width: 30px;
    }
    .address_image{
      width: 750px;
      margin-top: 20px;
    }
    .call_type_text{
      font-size: 12px;
      /*color: rgba(0,0,0,0.3);*/
      line-height: 20px;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
@media (min-width: 1200px){
  .contact_bottom_content{
    width: 100%;
    background-color: white;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .contact_text{
    font-size: 20px;
    letter-spacing:5px;
    font-family: SimSun;
    font-weight: 400;
    line-height: 30px;
    color: #717171;
    text-indent: 2em;
    text-align: justify;
  }
  .contact_title{
    font-size: 20px;
    font-family: SimSun;
    font-weight: 400;
    color: #717171;
  }
  .contact_text_content{
    width: 750px;
  }
  .contact_call_content{
    display: flex;
    margin-top: 40px;
    width: 750px;
    justify-content: space-between;
    align-items: center;
  }
  .call_item{
    width: 180px;
    height: 120px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .call_image{
    height: 30px;
    width: 30px;
  }
  .address_image{
    width: 750px;
    margin-top: 20px;
  }
  .call_type_text{
    font-size: 12px;
    /*color: rgba(0,0,0,0.3);*/
    line-height: 20px;
  }
}
</style>
